<template>
    <div class=shopcar-container>
       <div class="goodslist">
           <div class="mui-card" >
			    <div class="mui-card-content">
				    <div class="mui-card-content-inner">
					
                        <mt-switch ></mt-switch>

                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1572932850.83044508.jpg" alt="">
                        <div class="info">
                            <h1>小米CC9 Pro | 小米CC9 | 小米CC9 </h1>
                            <p >
                            <span class="price">￥2199</span>
                            <numbox></numbox>
                            <a href="#">删除</a>
                            </p>
                        </div>

				    </div>
			    </div>
		    </div>
            <div class="mui-card"  v-for="(item,i) in goodslist" :key="item.id">
			    <div class="mui-card-content">
				    <div class="mui-card-content-inner">
                        <mt-switch 
                          v-model="$store.getters.getGoodsSelected[item.id]"
													@change="selectedChanged(item.id,$store.getters.getGoodsSelected[item.id])"></mt-switch>
                        <img :src="item.thumb_path" alt="">
                        <div class="info">
                            <h1>{{item.title}} </h1>
                            <p >
                            <span class="price">￥{{item.sell_price}}</span>
                            <numbox :initCount="this.$getter. getGoodsCount[item.id]" :goodsid="item.id"></numbox>
                            //如何从购物车中拿到我们的数量
                            //1.可以先定义一个空对象，通过循环遍历store中的商品数据拿到id和数量，将id值作为键，count作为值
                                传给这个空对象，通过调用一个方法返回这个对象[id]，就能拿到对应商品的数量了
                            <a href="#" @click.prevent='remove(item.id,i)'>删除</a>
                            </p>
                        </div>

				    </div>
			    </div>
		    </div>
       </div> 
       <!-- 商品结算区域 -->
           <div class="mui-card">
			    <div class="mui-card-content">
				    <div class="mui-card-content-inner settlement">
					    <div class="settlementInfo">
                            <P>总计（不含运费）</P>
                            <p>已勾选商品 <span class="red">0</span> 件，总计 <span class="red">￥0</span> </p>
                        </div>
                        <mt-button type='danger'>去结算</mt-button>
				    </div>
			    </div>
		    </div>
				<!-- <div class="mui-card">
			    <div class="mui-card-content">
				    <div class="mui-card-content-inner settlement">
					    <div class="settlementInfo">
                            <P>总计（不含运费）</P>
                            <p>已勾选商品 <span class="red">{{$store.getters.getGoosCountAndAmount.count}}</span> 件，总计 <span class="red">￥{{$store.getters.getGoosCountAndAmount.amount}}</span> </p>
                        </div>
                        <mt-button type='danger'>去结算</mt-button>
				    </div>
			    </div>
		    </div> -->
        <p>{{$store.getters.getGoodsSelected}}</p>
    </div>
</template>

<script>
import numbox from "../subcomment/shopcar_numbox.vue"
export default {
    data(){
      return{
            goodslist:[]//购物车中所有商品的数据
      }

    },
    // created(){
    //     this.getGoodsList();
    // },
    methods:{
        // 定义一个方法获取goodslist中的car数据
        // getGoodsList(){
        //     // 获取store中所有商品的id,用逗号拼接出一个字符串
        //     var idArr= [];
        //     this.$store.state.car.forEach(item => idArr.push(item.id))
        //     // 如果购物车中没有商品，则直接返回，不去请求数据借口，否则会报错
        //     if(goodslist.length <=0 ){
        //         return
        //     }
        //      // 获取购物车商品列表
        //     this.$http.get("api/goods/getshopcarlist/"+idArr.join(",")).then(result => {
        //         if(result.body.status == 0){
        //             this.goodslist=result.body.message;
        //         }
        //     })
        // }
        remove(id,index){
            // 点击删除，把商品从store中购物车根据传递的id来删除，在当前组件中的商品列表goodslist中通过索引删除对应的商品数据
            this.goodslist.splice(index,1);
            this.$store.commit("removeFromCar",id)
				},
				selectedChanged(id,val){
					// 每当点击开关，将最新的开关状态同步到store中
					console.log(id+"------"+val)
					// this.$store.commit('updateGoodsSelected',{id:id,selected: val})
					this.$store.commit('updateGoodsSelected',{id,selected: val})
				}

    },
    components:{
        numbox
    }
}
</script>

<style lang="scss" scoped>
.shopcar-container{
    background-color: #eee;
    overflow: hidden;
    .goodslist{
        .mui-card-content-inner{
            display: flex;
             img{
                width: 60px;
                height: 60px;
            }
            h1{
                font-size: 13px;
              }
            .info{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
               .price{
                color: red;
                font-weight: bold;
                }
            }
        }
        
      
    }
    .settlement{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .settlementInfo{
            .red{
                color: red;
                font-weight: bold;
                font-size: 16px;
            }
        }
    }
}
</style>